iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
Modern Web

React Native的學習與實作系列 第 4

【Day4】React Native的環境設置(2)

  • 分享至 

  • xImage
  •  

今天介紹另外一種環境的安裝方法,因為我沒有不是使用這個方法,所以今天的內容將參考網路上的資料居多。

完整的環境設置需要根據你所使用的操作系統、針對的目標平台不同,具體的步驟也有所不同。如果想同時開發IOS 和Android也可以,但就是需要先選一個平台開始,在搭建另外一個平台的環境。(以下以Windows為開發平台,Android為目標平台為例)

1.安裝Node、JDK
安裝Node的方法上一篇已經講過了,而安裝JDK可以直接在以下網址安裝:
https://www.oracle.com/tw/java/technologies/downloads/#java11
注意:Node的版本需要大於16.安裝完Node後簡易設置npm鏡像以加速後面的過程。
React Native需要Java Development Kit [JDK]11。你可以在命令行中輸入

javac -version

來查看當前安裝的JDK版本。
Yarn
Yarn是Facebook提供的替代npm的工具,可以加速node模塊的下載。

npm install -g yarn

2.安裝Android Studio
首先下载和安装 Android Studio,可以至搜索引擎搜索或是點以下網址下載:https://developer.android.google.cn/studio/
安裝界面中選擇“Custom”,確保一定要選到:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
    後面直接按“Next”繼續完成安裝

3.安裝Android SDK
React Native適用的SDK目前是Android 13(Tiramisu)。你可以在Android Studio的SDK Manager中選擇安裝各種版本的SDK。SDK Manager可以再歡迎頁面中找到或者在Android Studio的“Preference”菜單中找到。(路徑:Appearance & Behavior→System Settings→Android SDK)
https://ithelp.ithome.com.tw/upload/images/20230919/20162023ExBq5LSCLG.png
在SDK Manager裡面,找到“SDK Platform”,勾選“Show Package Details”。展開Android 13(Tiramisu)選項,勾選以下兩個組件

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image
    然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。

4.安裝 Watchman(可選)
Watchman是一個文件檢視工具,它可以再React Native開發中提供更好的性能。在Windows可以使用Chocolatey來安裝

choco  install watchman

參考資料:https://reactnative.cn/docs/environment-setup


上一篇
【Day3】React Native的環境設置(1)
下一篇
【Day5】React Native元件與佈局(1)
系列文
React Native的學習與實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言